/*
 * @Date: 2023-08-07 16:41:27
 * @LastEditors: lyx
 * @LastEditTime: 2023-08-08 15:12:53
 * @FilePath: \sup-mini-app\src\components\Banner\index.tsx
 * @Description:
 */
import React from "react";
import { Swiper, SwiperItem, Image, View } from "@tarojs/components";
import { connect } from "react-redux";
import "./index.scss";
import useBanner from "./hooks/useBanner";

function Banner(props) {
  const { bannerList = [] } = props;
  const bannerInst = useBanner({ ...props });
  return (
    <View className="home-banner">
      <Swiper
        className="home-banner-swiper"
        indicatorColor="#999"
        indicatorActiveColor="#333"
        current={1}
        duration={500}
        interval={5000}
        circular
        autoplay
        indicatorDots
        preMargin="20"
      >
        {bannerList.map((item, idx) => (
          <SwiperItem key={item?._id || idx}>
            <Image
              mode="widthFix"
              src={item?.imgUrl}
              className="home-banner-swiper-image"
            />
          </SwiperItem>
        ))}
      </Swiper>
    </View>
  );
}
export default connect(({ banner: { bannerList }, loading }) => ({
  bannerList,
}))(Banner);
